<div class="sidebar">
  <div class="panel about" style="display: none;">
    <p><img src="/img/avatar.gif" alt=""></p>
    <p>登录成功，Hello Saturn！</p>
  </div>
  <div class="panel login" id="login">
    <div class="tab active">
      <form action="" method="post">
        <h3 class="title">登录</h3>
        <p>
          <input type="text" name="username" placeholder="用户名">
        </p>
        <p>
          <input type="text" name="password" placeholder="密码">
        </p>
        <p>
          <input type="submit" class="sub" value="登录">
        </p>
      </form>
    </div>
    <div class="tab">
      <form action="" method="post">
        <h3 class="title">注册</h3>
        <p>
          <input type="text" name="username" placeholder="用户名">
        </p>
        <p>
          <input type="text" name="password" placeholder="密码">
        </p>
        <p>
          <input type="submit" class="sub" value="注册">
        </p>
      </form>
    </div>
    <div class="tab-btn">
      <a href="javascript:;" class="btn ">去登录</a>
      <a href="javascript:;" class="btn active">去注册</a>
    </div>
  </div>
  <div class="panel">
    <h3 class="title">文章分类</h3>
    <div class="tags">
      <% count.forEach(function(item){ %>
        <a href="/list/<%= item.id %>">
          <%= item.name %><em>( <%= item.count %> )</em></a>
        <% }) %>
    </div>
  </div>
  <div class="panel">
    <h3 class="title">友情链接</h3>
    <div class="link">
      <a href="https://vmto.github.io">git blog</a>
      <a href="http://vuejs.org/">vuejs</a>
      <a href="http://webpack.github.io/">webpack</a>
      <a href="https://nodejs.org/en/">nodeJs</a>
      <a href="http://www.expressjs.com.cn/">express</a>
    </div>
  </div>
</div>
<script>
window.onload = function() {
  var oBox = document.getElementById('login');
  var aTab = oBox.getElementsByClassName('tab');
  var aBtn = oBox.getElementsByClassName('btn');

  for (var i = 0; i < aBtn.length; i++) {
    aBtn[i].index = i;
    aBtn[i].onclick = function() {
      for (var i = 0; i < aBtn.length; i++) {
        aTab[i].className = "tab";
        aBtn[i].className = "btn";
      }
      aTab[this.index].className = "tab active";
      aBtn[this.index].className = "btn active";
    };
  };
};
</script>
